


<template>
	<div class="app-container">
		<!-- 查询参数 -->
		<div class="search-wrapper">
			<el-form class="search-param" ref="pageParam" :model="pageParam" label-width="100px" size="mini">
				
						<el-form-item label="车牌号">
							<el-input v-model="pageParam.batNo" clearable></el-input>
						</el-form-item>
						<el-form-item label="车辆类型">
							<el-input v-model="pageParam.t1" clearable></el-input>
						</el-form-item>
						<el-form-item label="驾驶员姓名">
							<el-input v-model="pageParam.t2" clearable></el-input>
						</el-form-item>
						<el-form-item label="所属收运单位名称">
							<el-input v-model="pageParam.t3" clearable></el-input>
						</el-form-item>
						
						<el-form-item label="购买时间">
							    <el-date-picker
							      v-model="pageParam.twd"
							      type="date"
							      placeholder="选择日期">
							    </el-date-picker>
						</el-form-item>
					
						<el-form-item label="运行状态">
							<el-input v-model="pageParam.t4" clearable></el-input>
						</el-form-item>
						<el-form-item label="吨位">
							<el-input v-model="pageParam.t5" clearable></el-input>
						</el-form-item>
						<el-form-item style="margin-left: -60px;">
							<el-button type="primary" size="mini" class="el-icon-search" @click="pageByParam">确认查询</el-button>
						</el-form-item>
				
	
				
			</el-form>
		</div>
		<!-- 数据表格 -->
		<vxe-toolbar ref="xToolbar1" custom print :refresh="{query: oldlist}" import export>
			<template #buttons>
				<vxe-button status="success" v-if="auto.btnauto(2101)" size="mini" class="el-icon-circle-plus-outline"
					@click="addEditClick({})">
					新增</vxe-button>
			</template>
		</vxe-toolbar>
		<vxe-table show-overflow :column-config="{resizable: true}" :import-config="{}" :export-config="{}"
			:print-config="{}" height="400" :loading="loading" :data="tableData.list" :height="cheight-350" size="mini"
			border stripe>
			<vxe-column type="checkbox" width="60"></vxe-column>
			<vxe-column type="seq" title="记录号" width="60"></vxe-column>
			<vxe-column field="t1" title="车牌号"></vxe-column>
			<vxe-column field="t2" title="车辆类型"></vxe-column>
			<vxe-column field="t3" title="驾驶员姓名"></vxe-column>
			<vxe-column field="t4" title="所属收运单位名称"></vxe-column>
			<vxe-column field="t5" title="运行状态"></vxe-column>
			<vxe-column field="t6" title="车载终端号"></vxe-column>
			<vxe-column field="t7" title="身份识别卡编号"></vxe-column>
			<vxe-column field="t8" title="吨位"></vxe-column>
			<vxe-column field="t9" title="购买时间"></vxe-column>
			<vxe-column title="操作" width="130" show-overflow>
				<template #default="{ row }">
					<vxe-button status="primary" v-if="auto.btnauto(2102)" icon="el-icon-edit"
						@click="addEditClick(row)"></vxe-button>
					<vxe-button status="danger" v-if="auto.btnauto(2103)" icon="el-icon-delete"
						@click="handleDelete(row.id)"></vxe-button>
				</template>
			</vxe-column>
			<!-- <vxe-column field="_X_ID" title="_X_ID"></vxe-column> -->
		</vxe-table>
		<vxe-pager background size="small" stripe :loading="loading" :current-page="pageParam.pageIndex"
			:page-size="pageParam.pageSize" :total="tableData.totalRow"
			:page-sizes="[15, 20, 100, {label: '大量数据', value: 1000}]"
			:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" background
			class="page-wrapper" @page-change="handleCurrentChange">
		</vxe-pager>
		<!-- 新增与编辑 -->
		<add-edit ref="addEdit" @oldlist="oldlist"></add-edit>
	</div>
</template>

<script>
	import request from '@/utils/request'
	import addEdit from './add_edit.vue';
	import datajson from '@/views/util/data.json'
	import {
		list,
		list1,
		getcompany,
		getDepList,
		del
	} from './index.js'
	export default {
		components: {
			addEdit
		},
		data() {
			return {
				loading: true,
				cheight: document.documentElement.clientHeight,
				timer: [],
				pageParam: {
					batFromCompanyList: [],
					batFromDeptList: [],
					batNo: "",
					twd: "",
					pageIndex: 1,
					pageSize: 15,
					token: localStorage.getItem('goods__token')
				},
				userinfo: {},
				tableData: {
					totalRow: 0,
					list: []
				}
			}
		},
		created() {
			let userinfo = JSON.parse(localStorage.getItem("userinfo"));
			this.userinfo = userinfo;
			// if (userinfo.depid != 1) {
			// 	this.companyact = parseInt(userinfo.depid);
			// 	this.getDepList();
			// }
			 this.oldlist()
			// this.getcompany();


		},
		methods: {
			
			pageByParam() {
				this.pageParam.pageIndex = 1;
				this.pageParam.pageSize = 15;
				this.oldlist()
			},
			handleCurrentChange(val) {
				console.log(val);
				if (val.type == "size") {
					this.pageParam.pageIndex = 1;
					this.pageParam.pageSize = val.pageSize;
					this.oldlist();
				}
				if (val.type == "current") {
					this.pageParam.pageIndex = val.currentPage;
					this.pageParam.pageSize = val.pageSize;
					this.oldlist();
				}
			},
			
		
			//电池列表
			async oldlist() {
				console.log(datajson.carlist);
				// this.loading = true;
				// if (this.companyact) {
				// 	this.pageParam.batFromCompanyList = [this.companyact];
				// } else {
				// 	this.pageParam.batFromCompanyList = [];
				// }
				// if (this.depment) {
				// 	this.pageParam.batFromDeptList = [this.depment];
				// } else {
				// 	this.pageParam.batFromDeptList = [];
				// }
				// let result = await list1(this.pageParam);
				//console.log("返回结果", result.data);
				this.loading = false;
				
				// this.tableData.totalRow = result.data.total;
				// this.tableData.list = result.data.list;
				this.tableData.totalRow = datajson.carlist.length;
				this.tableData.list = datajson.carlist;

			},
			addEditClick(item) {
				this.$refs.addEdit.open(item);
			},
			// 删除
			handleDelete(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.del(id);
				})
			},
			async del(id) {

				let result = await del({
					id,
					token: this.pageParam.token
				});
				if (result.code == 1) {
					this.msgSuccess("删除成功");
					this.oldlist();
				}
				console.log(result)
			}
		}
	}
</script>

<style>
	.vxe-input--panel.type--date,
	.vxe-input--panel.type--month,
	.vxe-input--panel.type--week,
	.vxe-input--panel.type--year {
		z-index: 9998 !important
	}

	.vxe-select--panel {
		z-index: 9997 !important
	}
</style>
